<script setup lang="ts">
import jsonData from "#/index.json"
import { ref, onMounted, watch } from "vue"
import { getCompanyByUser, handleUserApprove } from "@/api/user/interview"
import { InterviewRecord } from "@/api/user/types/interview"
import { usePagination } from "@/hooks/usePagination"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"

const router = useRouter()
const { paginationData, handleCurrentChange } = usePagination({ layout: "total, prev, pager, next, jumper" })

// #region 获取投递进度
const interviewData = ref<InterviewRecord[]>([])
function getInterviewData() {
  const params = {
    current: paginationData.current,
    pageSize: paginationData.pageSize,
    sortField: "createTime",
    sortOrder: "desc"
  }

  getCompanyByUser(params)
    .then(({ data }) => {
      interviewData.value = data.records
      for (const key in interviewData.value) {
        if (Object.prototype.hasOwnProperty.call(paginationData, key)) {
          // @ts-expect-error
          paginationData[key] = interviewData.value[key]
        }
      }
      paginationData.total = Number(data.total)
    })
    .catch(() => {
      ElMessage("获取面试结果失败")
    })
}

function handleApprove(companyWorkId: string, interviewResult: boolean) {
  const interviewResultCode = interviewResult ? 2 : 1
  handleUserApprove({
    companyWorkId: Number(companyWorkId),
    interviewResult: interviewResultCode
  })
  // 提示和刷新
  ElMessage({ type: "success", message: "操作成功" })
  getInterviewData()
}

function getResourecLabel(val: number | string, resource: { value: number; label: string }[]) {
  if (val === undefined) val = 0
  const [tagItem] = resource.filter((item) => item.value === Number(val))
  return tagItem?.label || "未知"
}

watch(
  () => paginationData.current,
  () => getInterviewData()
)

onMounted(() => {
  getInterviewData()
})
// #endregion
</script>

<template>
  <div class="app-container">
    <div class="schedule-wrapper">
      <el-card class="empty-data" v-if="interviewData.length === 0" shadow="never">
        <el-empty description="空数据" />
      </el-card>
      <template v-for="item of interviewData" :key="item.id">
        <el-descriptions class="schedule-list" :title="item.companyWorkVO.workName" :column="1">
          <el-descriptions-item label="薪资范围">{{
            getResourecLabel(item.companyWorkVO.workPrice, jsonData.workPrice)
          }}</el-descriptions-item>
          <el-descriptions-item label="投递公司">{{ item.companyWorkVO.companyVO.companyName }}</el-descriptions-item>
          <el-descriptions-item label="投递进度" width="950px">
            <el-steps finish-status="finish" :active="item.flowStatus" simple>
              <el-step title="已投递">
                <template #icon>
                  <svg-icon name="send" />
                </template>
              </el-step>
              <el-step title="待同意面试">
                <template #icon>
                  <svg-icon name="approve" />
                </template>
              </el-step>
              <el-step title="面试中">
                <template #icon>
                  <svg-icon name="interview" />
                </template>
              </el-step>
              <el-step title="已结束">
                <template #icon>
                  <svg-icon name="finish" />
                </template>
              </el-step>
            </el-steps>
          </el-descriptions-item>
          <el-descriptions-item label="面试结果">
            {{ getResourecLabel(item.interviewResult, jsonData.interview) }}
          </el-descriptions-item>
          <template #extra>
            <div class="schedule-list__extra">
              <el-button
                type="primary"
                :disabled="item.flowStatus !== 1"
                @click="handleApprove(item.companyWorkVO.id, true)"
                text
                bg
                >同意面试</el-button
              >
              <el-button
                type="primary"
                :disabled="item.flowStatus !== 1"
                @click="handleApprove(item.companyWorkVO.id, false)"
                text
                bg
                >拒绝面试</el-button
              >
              <el-button @click="router.push(`/job-details/${item.companyWorkVO.id}`)" text bg>职位详情</el-button>
            </div>
          </template>
        </el-descriptions>
      </template>
    </div>
    <el-card class="pager-wrapper" shadow="never">
      <el-pagination
        background
        :total="Number(paginationData.total)"
        :page-size="Number(paginationData.pageSize)"
        :current-page="Number(paginationData.current)"
        @current-change="handleCurrentChange"
        :layout="paginationData.layout"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss" src="./style.scss"></style>
